<template>
  <a-card :bordered="true" title="用户和部门选择" style="margin-bottom: 30px">
    <a-row style="margin-bottom: 10px">
      <a-col :span="4">
        <div class="example-side">
          demo1:部门选择框
        </div>
      </a-col>
      <a-col :span="6">
        <div class="example-side">
          <a-form-item>
            <dept-select v-model="deptId" :multi="true"/>
          </a-form-item>
        </div>
      </a-col>
      <a-col :span="6" style="margin-left: 120px">
        <div>
          当前显示: {{ deptId }}
        </div>
      </a-col>
    </a-row>
    <a-row style="margin-bottom: 10px">
      <a-col :span="4">
        <div class="example-side">
          demo1:用户选择框
        </div>
      </a-col>
      <a-col :span="7">
        <div class="example-side">
          <a-form-item>
            <user-select v-model="multiUser"/>
          </a-form-item>
        </div>
      </a-col>
      <a-col :span="6" style="margin-left: 55px">
        <div>
          当前显示:
          <span v-for="item in multiUser" :key="item.key">
            {{ item.label }}
          </span>
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import userSelect from '@/components/BizTools/userSelect'
import deptSelect from '@/components/BizTools/deptSelect'
export default {
  name: 'UserAndDeptSelectBox',
  components: {
    deptSelect,
    userSelect
  },
  data () {
    return {
      deptId: undefined,
      multiUser: undefined
    }
  },
  methods: {

  }
}
</script>

<style scoped>
</style>
